<%def name="wpselector_gmapjs(mode)">
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${ctx.gmapkey}"
            type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>        
    <script type="text/javascript">	
    
    var wpselector_map = null;
    var wpselector_geocoder = null;
    var wpselector_marker = null;

    function wpselector_setMarker(latlng)
    {
           if( wpselector_marker == null )
           {
                  wpselector_marker = new GMarker( latlng );  
                  if( wpselector_map != null )
                  {
                        wpselector_map.addOverlay(wpselector_marker);
                  }
                  else
                  {
                        wpselector_marker = null;
                  }
            }
            else
            {
                  wpselector_marker.setPoint(latlng);
            }     
    }

    function wpselector_initialize() {
      if (GBrowserIsCompatible()) {
      
        wpselector_map = new GMap2(document.getElementById("wpselector_map_canvas"));
        <%doc> search for last way point and center here if available </%doc>
        % if ctx.wp.coords == None:
            <% lwp_lat = "49.1234" %>
            <% lwp_lng = "49.1234" %>
            <% lwp_flag = False %>
            % for wp in ctx.j.waypoints:
                <% lwp_flag = True %>
                <% lwp_lat = wp.lat() %>
                <% lwp_lng = wp.lng() %>
            % endfor
            %if lwp_flag:
                wpselector_map.setCenter(new GLatLng(${lwp_lat},${lwp_lng}), 10);
            %endif
        % else:
            wpselector_map.setCenter(new GLatLng(${h.default(ctx.wp.lat(), "49.1234")},${h.default(ctx.wp.lng(), "9.1234")}), 16);
            wpselector_setMarker( new GLatLng(${h.default(ctx.wp.lat(), "49.1234")},${h.default(ctx.wp.lng(), "9.1234")}) );
        % endif
        wpselector_map.addControl(new GSmallMapControl());
        wpselector_map.addControl(new GMapTypeControl());
//        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
        wpselector_geocoder = new GClientGeocoder();

        GEvent.addListener(wpselector_map,"click", function(overlay,latlng) {
          if (overlay) {
            // ignore if we click on the info window
            return;
          }
          wpselector_setMarker(latlng);
          var tileCoordinate = new GPoint();
          var tilePoint = new GPoint();
          var currentProjection = G_NORMAL_MAP.getProjection();
          tilePoint = currentProjection.fromLatLngToPixel(latlng, wpselector_map.getZoom());
          tileCoordinate.x = Math.floor(tilePoint.x / 256);
          tileCoordinate.y = Math.floor(tilePoint.y / 256);
          var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng();	
          wpselector_map.openInfoWindow(latlng, myHtml);

          % if mode == "edit":      
            forma = document.getElementById("newwaypointform");
            forma.coords.value = latlng.lat() + ", " + latlng.lng();
          % endif
        });
      }
    }
    
    
    function wpselector_showAddress(address) {
      if (wpselector_geocoder) {
        wpselector_geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              wpselector_map.setCenter(point, 13);
              var wpselector_marker = new GMarker(point);
              wpselector_map.addOverlay(wpselector_marker);
              wpselector_marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
    
    </script>
</%def>

<%def name="wpselector_searchform()">
    <form action="#" onsubmit="wpselector_showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="Spain, Saint Jean Pied de Port" />
        <input type="submit" value="Search" />
      </p>
    <div id="wpselector_map_canvas" style="border:1px solid #000000;background-color:#EEEEEE;width: 800px; height: 400px"></div>
    </form>
</%def>

<%def name="journeypoly_gmapjs()">
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${ctx.gmapkey}"
            type="text/javascript"></script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>        
    <script type="text/javascript">	
    
    var journeypoly_map = null;
    var journeypoly_geocoder = null;
    var journeypoly_marker = null;
    function ScrollToElement(theElement){

      var selectedPosX = 0;
      var selectedPosY = 0;
                  
      while(theElement != null){
        selectedPosX += theElement.offsetLeft;
        selectedPosY += theElement.offsetTop;
        theElement = theElement.offsetParent;
      }
                                          
     window.scrollTo(selectedPosX,selectedPosY);

    }

    function journeypoly_center(lat,lng)
    {
        journeypoly_map.setCenter(new GLatLng(lat,lng), 15 );
       ScrollToElement(document.getElementById("journeypoly_map_canvas"))
    }
    
    function journeypoly_setMarker(latlng)
    {
           if( journeypoly_marker == null )
           {
                  journeypoly_marker = new GMarker( latlng );  
                  if( journeypoly_map != null )
                  {
                        journeypoly_map.addOverlay(journeypoly_marker);
                  }
                  else
                  {
                        journeypoly_marker = null;
                  }
            }
            else
            {
                  journeypoly_marker.setPoint(latlng);
            }     
    }

    function journeypoly_initialize() {
      if (GBrowserIsCompatible()) {
      
        journeypoly_map = new GMap2(document.getElementById("journeypoly_map_canvas"));
        journeypoly_map.setCenter(new GLatLng(${h.default(None, "49.1234")},${h.default(None, "9.1234")}), 10);
//        journeypoly_setMarker( new GLatLng(${h.default(None, "49.1234")},${h.default(None, "9.1234")}) );
        journeypoly_map.addControl(new GSmallMapControl());
//        journeypoly_map.addControl(new GMapTypeControl());
        journeypoly_map.addMapType( G_NORMAL_MAP );
        journeypoly_map.addMapType( G_SATELLITE_MAP );
        journeypoly_map.addMapType( G_HYBRID_MAP );
        journeypoly_map.addMapType( G_PHYSICAL_MAP );
        journeypoly_map.setMapType(  G_PHYSICAL_MAP );
        journeypoly_map.addControl(new GHierarchicalMapTypeControl())
//        map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
        journeypoly_geocoder = new GClientGeocoder();

        % if len(ctx.j.waypoints):
        var polyOptions = {geodesic:true};
        <% comma = "" %>
        var polyline = new GPolyline([
          % for wp in ctx.j.waypoints:
                % if wp.coords:
                    ${comma} new GLatLng(${wp.lat()}, ${wp.lng()}),<% comma="," %>
                % endif
          % endfor
        ], "#ff0000", 3, 1, polyOptions);
        
        % for wp in ctx.j.waypoints:
            % if wp.coords and wp.icon == 1:
                journeypoly_map.addOverlay(new GMarker( new GLatLng(${wp.lat()}, ${wp.lng()} ) ));
            % endif
          % endfor
        encodedLevels = "B";
            
        journeypoly_map.addOverlay(polyline);
        
        polybounds = polyline.getBounds();
        journeypoly_map.setCenter( polybounds.getCenter());
        
        journeypoly_map.setZoom(journeypoly_map.getBoundsZoomLevel(polybounds));
                
        % endif
      }
    }
    
    
    function journeypoly_showAddress(address) {
      if (journeypoly_geocoder) {
        journeypoly_geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              journeypoly_map.setCenter(point, 13);

            }
          }
        );
      }
    }
    
    </script>
</%def>

<%def name="journeypoly_view()">
    <form action="#" onsubmit="journeypoly_showAddress(this.address.value); return false">
      <p>
        <%doc><input type="text" size="60" name="address" value="Spain, Saint Jean Pied de Port" />
        <input type="submit" value="Search" /></%doc>
      </p>
    <div id="journeypoly_map_canvas" style="border:1px solid #000000;background-color:#EEEEEE;width: 800px; height: 400px"></div>
    </form>
</%def>






